<template>
	<view>
		<use-navbar ref="navbar" title=" " :show="true" left-icon="icontubiaozhizuomoban-11 fs-xxl"
			:bg-color="navbarBgcolor"></use-navbar>
		<!-- 01. 轮播区 -->
		<view class="swiper-area w-full" :class="[ isapp ? '' : 'pos-f' ]" :style="{ 'margin-top': navbarHeight }">
			<swiper class="h-full" indicator-dots circular="true" duration="400">
				<swiper-item v-if="goods.video && goods.video.url" class="dflex-c">
					<!-- <video
						object-fit="fill"
						:id="goods._id"
						:src="goods.video.url"
						:poster="goods.video.poster"
						:poster-for-crawler="goods.video.poster"
						:vslide-gesture-in-fullscreen="false"
						:enable-play-gesture="true"
						:direction="0"
						:style="{ height: '100%' }"
					></video> -->
					<view class="wh-full pos-r" @click="toVideo">
						<image :src="goods.video.poster" class="wh-full loaded" lazy-load mode="aspectFill"></image>
						<view class="iconfont iconbofang pos-a pos-tl-c ft-white fs-80"></view>
					</view>
				</swiper-item>
				<swiper-item v-for="(item, idx) in swiperDatas" :key="idx">
					<view class="wh-full">
						<image :src="item" class="wh-full loaded" lazy-load mode="aspectFill"
							@click="preview(swiperDatas, item.url)"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="goods-area padding-lr-sm bg-drak" :class="[ isapp ? '' : 'pos-a border-radius-top30' ]"
			:style="{ 'margin-top': 0 }">
			<!-- 02. 商品数据区 -->
			<view class="use-area padding-r0" :class="[goods.vip ? '' : 'margin-t0']">
				<view class="dflex pos-r" style="align-items: flex-end;">
					<view class="dflex">
						<text v-if="goods.isNew" class="use-tag bg-base margin-right-sm">新品</text>
						<text
							class="price fs-big">{{ goods.sellPrice || 0 }}</text>
					</view>
					<!-- <view class="margin-left-sm" >
						<text class="ft-dark">市场价</text>
						<text class="price fs ft-dark">{{ goods.marketPrice  }}</text>
					</view> -->
					<view class="m-price fs-xs ft-dark" >
						{{ goods.marketPrice}}
					</view>
				</view>
				<view class="margin-top padding-right">
					<text class="title fs fwb clamp-2">{{ goods.title || '' }}</text>
				</view>

				<view class="margin-top-sm padding-right dflex-b ">
					<view class="dflex-c">
						<!-- <view v-if="integral > 0" class="dflex padding-16 border-radius-sm bg-drak">
							<text class="iconfont iconyixiaoshou margin-right-xs line-height-0"></text>
							<text class="fs-xs">购买可得<text class="ft-base">{{integral}}</text>积分</text>
						</view> -->
					</view>
					<view class="dflex ">
						<view class="margin-right dflex ft-dark">
							<view class="padding-right-xs padding-right-xs">PV:</view>
							<text class="price ft-dark">{{ goods.pvPrice || '0' }}</text>
						</view>
						<view class="margin-right dflex ft-dark">
							<view class="padding-right-xs padding-right-xs">库存:</view>
							<text>{{ goods.reserveCount || '0' }}</text>
						</view>
						<view class="margin-right dflex ft-dark">
							<view class="padding-right-xs padding-right-xs">销量:</view>
							<text>{{ (goods.salesVolume+goods.virtualVolume) || '0' }}</text>
						</view>
						<view class="border-radius-lg bg-drak dflex-c use-hover" style="width: 60rpx; height: 60rpx;">
							<!-- #ifdef MP-WEIXIN || H5 || APP -->
							<view class="dflex-c wh-full" @click="shareOpen">
								<view class="iconfont iconfenxiang "></view>
							</view>
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-QQ || MP-TOUTIAO -->
							<button class="btn no-border padding-0 fs-sm ft-dark" open-type="share">
								<view class=" dflex">
									<view class="iconfont iconfenxiang "></view>
								</view>
							</button>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
			<view class="use-area padding-tb-sm">
					
				<!-- 选规格 -->
				<!-- <view v-if="isSkus" class="dflex-b padding-tb-16 use-hover" @click="operType = 'spec';specShow = true">
					<view class="dflex">
						<view class="ft-dark" style="width: 90rpx">已选</view>
						<text class="">{{ spec || '请选择规格' }}</text>
					</view>
					<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
				</view> -->

				<!-- 04.01 优惠券 -->
				<!-- <view class="dflex-b padding-tb-16 use-hover" @click="couponShow = true">
					<view class="dflex">
						<view class="ft-dark" style="width: 90rpx">优惠</view>
						<text class="">领取优惠券</text>
					</view>
					<view class="dflex-c">
						<view class="bg-base padding-lr-xs border-radius-lg fs-xxs margin-right-xs">2张可用</view>
						<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
					</view>
				</view> -->

				<!-- 04.02 服务标签 -->
				<view class="dflex-b padding-tb-16 use-hover">
					<view class="dflex-s">
						<view class="ft-dark" style="width: 90rpx">服务</view>
						<view class="">
							<block >
								<text class="margin-right-xs">{{ goods.noReason?"支持七天无理由退货":"不支持七天无理由退货" }}</text>
							</block>
						</view>
					</view>
					<view class="dflex-c">
						<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
					</view>
				</view>

				
			</view>
			<view class="use-area padding-tb-sm">
			<view class="fwbd dflex">商品介绍</view>
			{{goods.intro}}
			</view>

			<!-- 05. 评价区 -->
			<!-- <view class="use-area evaluate-area" v-if="evaluateDatas.length > 0">
				<view class="dflex-b use-hover" @click="toevaluate">
					<view class="dflex fwbd">{{evaluateTitle}}</view>
					<view class="dflex-c">
						<view class="margin-right-xs ft-dark">查看全部</view>
						<view class="iconfont iconjiantou-01 fs-sm ft-dark"></view>
					</view>
				</view>
				<view class="margin-top" :class="{ 'border-line': idx < evaluateDatas.length - 1 }"
					v-for="(item, idx) in evaluateDatas" :key="idx">
					<view class="dflex-b">
						<view class="dflex">
							<image class="headimg border-radius-c" :src="item.member_headimg"></image>
							<view class="right-area flex1 padding-left-sm">
								<view class="margin-right">
									<view class="fwbd">{{ item.member_name }}</view>
									<use-rate class="line-height-1" icon-size="fs" :value="item.review_cnt" disabled>
									</use-rate>
								</view>
							</view>
						</view>
						<text class="time ft-dark fs-xs">{{ $api.format(item.create_time, 'yyyy/MM/dd') }}</text>
					</view>
					<view class="content-area margin-top-xs">
						<view class="ft-main padding-top-xs padding-bottom-sm">{{ item.review_content }}</view>
						<view class="dflex dflex-wrap-w">
							<view v-for="(img, i) in item.review_imgs" :key="i" class="dflex-c image-area">
								<image :src="img" lazy-load mode="widthFix" @click="preview(item.review_imgs, img)">
								</image>
							</view>
						</view>
						<view v-if="item.goods_type" class="padding-bottom-sm">
							<text class="fs-xxs ft-dark">{{ item.goods_type }}</text>
						</view>
					</view>
				</view>
			</view> -->

			<!-- 06. 详情区 -->
			<view class="use-area detail-area bg-main margin-bottom-big">
				<view class="fwbd dflex">图文介绍</view>
				<rich-text class="pro-detail" :nodes="goods.detail"></rich-text>
			</view>

		</view>

		<!-- 07. 操作区 -->
		<view class="oper-area pos-f dflex-b w-full padding-lr-sm safe-area-inset-bottom">
			<view class="btn-area dflex dflex-flow-c use-hover" @click="tohome">
				<text class="iconfont iconshouye-1"></text>
				<text>首页</text>
			</view>
			<!-- <view class="btn-area dflex dflex-flow-c use-hover" :class="{ active: favorite }" @click="tofavorite">
				<text class="iconfont" :class="favorite ? 'iconshoucang-' : 'iconshoucang-01'"></text>
				<text>收藏</text>
			</view> -->
			<view class="flex1 btn-container dflex-b border-radius-big">
				<!-- <view class="tac padding-tb-sm flex1 bg-warn" v-if="goods.reserveCount > 0" @click="tocart(goods)">加入购物车
				</view> -->
				<!-- <view class="tac padding-tb-sm flex1 bg-warn use-hover" v-if="goods.reserveCount > 0"
					@click="tocart('cart')">
					加入购物车
				</view> -->
				<!-- <view class="tac padding-tb-sm flex1 bg-base" v-if="goods.reserveCount > 0" @click="tobuy(goods)">立即购买
				</view> -->
				<view class="tac padding-tb-sm flex1 bg-base use-hover" v-if="goods.reserveCount > 0"
					@click="tobuy('buy')">立即购买
				</view>
				<view class="tac padding-tb-sm flex1 bg-disabled" v-else>已售磐</view>
			</view>
		</view>

		
		<use-video v-model="videoShow" :videoObj="goods.video" @exit="videoShow = false;"></use-video>


		<!-- 置顶 -->
		<use-totop ref="usetop" :safe-area-inset-bottom="true" bottom="120"></use-totop>
	</view>
</template>

<script>
	// #ifdef MP-ALIPAY
	import aliParse from 'mini-html-parser2';
	// #endif

	import lPainter from '@/uni_modules/lime-painter/components/lime-painter/';
	import uposter from '@/common/poster.js';
	import {order_save} from "../../js_sdk/apis/order.js"
	import {goods_detail} from "../../js_sdk/apis/goods.js"
	export default {
		components: {
			lPainter
		},
		computed: {
			userInfo(){
				return this.$store.state.user.userInfo
			},
			isLogin(){
				return this.$store.getters['user/hasLogin']
			}
		},
		data() {
			return {
				navbarHeight: '0px',
				statusHeight: '0px',
				navbarBgcolor: 'rgba(255,255,255, 0)',
				// 商品ID
				id: 0,
				// 分享ID
				mid: 0,
				// 商品数据
				goods: {},
				// 轮播图
				swiperDatas: [],
				// SKU
				sku: {},
				skuDatas: [],
				isSkus: false,
				// 视频
				videoShow: false,
				// 分享
				shareShow: false,
				// 海报
				posterQRcode: '',
				posterUrl: '',
				posterShow: false,
				posterData: {},
				// 商品规格
				spec: '',
				specShow: false,
				specShowData: [],
				//优惠券
				couponShow: false,
				couponDatas: [],
				// 服务标签
				tagShow: false,
				// 商品评价
				evaluateDatas: [],
				evaluateTitle: '用户评价',
				// 操作类型
				operType: 'spec',
				// 商品详情
				html_nodes: '',
				// 收藏
				favorite: false,

				scrollTop: 0,
				// 购买数量
				goods_num: 1,

				member_setting: {},
				integral_setting: {},

				isapp: false
			};
		},
		onShareAppMessage: function(ops) {
			let _this = this;
			let mid = 0;
			if (_this.member && _this.member._id) {
				mid = _this.member._id;
			}

			if (this.shareShow) this.shareShow = false;

			return {
				title: _this.goods.share_title,
				path: `/pages/goods/goods?id=${this.id}&mid=${mid}`, //这里设定都是以"/page"开头,并拼接好传递的参数
				success: function(res) {
					// 转发成功
					console.log('转发成功', res);
				},
				fail: function(res) {
					// 转发失败
					console.log('转发失败', res);
				}
			};
		},
		onPageScroll(e) {
			if (e.scrollTop <= 500) this.navbarBgcolor = `rgba(255,255,255, ${e.scrollTop / 500})`;

			//this.scrollTop = e.scrollTop;
			this.$refs.usetop.change(e.scrollTop);
		},
		onLoad(option) {
			if(option.id){
				goods_detail({id:option.id}).then(res=>{
					console.log(res)
					this.goods=res.data
					this.swiperDatas=this.goods.sliderImage.split(",")
					getApp().globalData.goods=res.data
				})
			}else{
				console.log('onload opts', getApp().globalData.goods);
				this.goods=getApp().globalData.goods
				this.swiperDatas=this.goods.sliderImage.split(",")
			}
		},
		onShow(options) {
			uni.hideLoading();
			
			// if (!this.id) {
			// 	const query = decodeURIComponent(uni.getStorageInfoSync('__scene_query_q'));
			// 	this.resolveQueryq(query);
			// }

			//this.loadData();

			// #ifdef APP
			this.isapp = true;
			// #endif
		},
		onBackPress(options) {
			console.log('onBackPress', options);
			if (options.from === 'navigateBack') {
				return false;
			}
			if (this.specShow || this.couponShow || this.posterShow || this.shareShow) {
				if (this.specShow) this.specShow = false;
				if (this.couponShow) this.couponShow = false;
				if (this.shareShow) this.shareShow = false;
				if (this.posterShow) this.posterShow = false;
				return true;
			} 
		},

		methods: {
			async loadData() {

				await this.$func.usemall
					.call('goods/detail', {
						goods_id: this.id,
						share_mid: this.mid
					})
					.then(res => {
						if (res.code === 200) {
							// 商品评价
							this.evaluateDatas = res.datas.evaluate;
							if (res.datas.evaluate_cnt) this.evaluateTitle = `用户评价（${res.datas.evaluate_cnt}）`;

							if (typeof res.datas.goods.imgs === 'string') {
								this.swiperDatas = res.datas.goods.imgs.split(',').filter(x => x);
							} else {
								this.swiperDatas = res.datas.goods.imgs.map(x => x.url);
							}

							res.datas.goods.skus = res.datas.goods.skus.filter(x => x.enable && x.arrs && x.arrs
								.length > 0);
							res.datas.goods.skus.forEach(x => {
								x.curIdx = 0;
							});

							res.datas.goods.vip = res.datas.goods.is_vip === '是';
							// 商品
							this.goods = res.datas.goods;
							this.isSkus = this.goods.skus && this.goods.skus.find(x => x.enable && x.arrs && x.arrs
								.length > 0);

							// 商品SKU
							this.skuDatas = res.datas.goods_skus || [];
							// SKU
							if (this.skuDatas.length > 0) {
								this.sku = this.skuDatas[0];
								this.spec = this.goods.skus.map(x => x.arrs[x.curIdx]).filter(x => x).join(' & ');
								// this.goods.reserveCount = this.skuDatas.
							}

							// console.log('this.goods', this.goods, this.skuDatas);

							// 商品详情
							let __goods_detail = res.datas.goods_detail;
							// #ifndef MP-ALIPAY
							this.html_nodes = __goods_detail.desc_mobile;
							// #endif

							// #ifdef MP-ALIPAY
							this.html_nodes = [];
							aliParse(__goods_detail.desc_mobile, (err, nodes) => {
								if (!err) {
									this.html_nodes = nodes;
								}
							});
							// #endif

							// 服务标签
							if (typeof this.goods.tags === 'string') {
								this.goods.tags = this.goods.tags.split(',').filter(x => x);
							}

							let __tagDatas = [];

							this.goods.tags.forEach((data, idx) => {
								__tagDatas.push({
									name: data,
									selected: idx == 0
								});
							});

							this.tagDatas = __tagDatas;

							// 收藏状态
							this.favorite = this.goods.collected === 1;

							this.member_setting = res.datas.member_setting || {};
							this.integral_setting = res.datas.integral_setting || {};
							return;
						}
						this.$api.msg(res.msg);
					});
			},
			// 处理 query q 数据
			resolveQueryq(query) {
				const arr = query
					.split('/')
					.slice(-1)[0]
					.split('_');
				if (arr.length == 2) this.mid = arr[1];
				this.id = arr[0];
			},
			// 图片预览
			preview(imgs, cur) {
				if (!imgs) return;

				uni.previewImage({
					urls: imgs,
					current: cur,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log(res);
						},
						fail: function(err) {
							console.log(err);
						}
					}
				});
			},
			toVideo() {
				this.$api.msg('播放视频');
				this.videoShow = true;
			},
			// 打开分享
			shareOpen() {
				if (!this.loginCheck()) return;

				this.shareShow = true;
			},
			// 创建海报
			createPoster() {
				this.shareShow = false;
				if (this.posterUrl) {
					this.posterShow = true;
					return;
				}
				uni.showLoading({
					title: '生成海报中'
				});

				// #ifdef MP || APP
				// 此处的二维码内容，需自己在小程序端配置普通二维码规则
				this.posterQRcode = `https://usemall.use-cloud.com/wxmp-product/${this.goods._id}_${this.member._id}`;
				// #endif

				// #ifdef H5
				// 如果为 h5，二维码内容需配置为线上版本产品详情路径
				this.posterQRcode =
					`https://usemall-h5.use-cloud.com/#/pages/goods/goods?id=${this.goods._id}&mid=${this.member._id}`;
				// #endif
			},
			// 海报二维码生成成功
			posterQRcodeResult(res) {
				// 获取产品海报数据
				this.posterData = uposter.getGoodsData(this.member, this.goods, res);
				// console.log('this.posterData', this.posterData);

				this.posterShow = true;
			},
			// 海报生成完成
			posterSuccess(res) {
				this.posterUrl = res;

				uni.hideLoading();
			},
			// 保存海报
			posterSave() {
				if (this.posterUrl) {
					uni.showLoading({
						title: '保存中'
					})

					uni.saveImageToPhotosAlbum({
						filePath: this.posterUrl,
						success: function() {
							uni.hideLoading();

							uni.showToast({
								title: '海报保存成功',
								icon: 'success',
								duration: 2000
							});
						}
					});
				}
			},
			// 分享好友WXSceneSession 或 朋友圈WXSceneTimeline
			async toShare(type, scene = "WXSceneSession") {
				console.log('toShare 1', this.posterUrl);
				if (type == 2 && !this.posterUrl) {
					this.$api.msg('海报生成中，请稍等');
					return;
				}

				uni.showLoading({
					title: '打开分享中'
				})
				let shareData = {
					type,
					scene
				};
				switch (type) {
					case 0:
						// 分享图文
						shareData.href = "http://usemall-h5.use-cloud.com?q=app";
						shareData.title = "世华圣医";
						shareData.summary = `我正在[世华圣医]购买一款[${this.goods.name}]，赶紧跟我一起来体验！`;
						shareData.imageUrl = this.goods.img;
						break;
					case 2:
						// 分享图片
						shareData.imageUrl = this.posterUrl;
						if (this.posterUrl.indexOf('http') !== 0) {
							const uRes = await this.$api.uploadFile(this.posterUrl, `${Date.now()}.png`)
								.catch(err => {
									this.$api.msg(err.message);
									uni.hideLoading();
								});
							
							shareData.imageUrl = uRes.url;
							this.posterUrl = uRes.url;
						}
						break;
				}

				uni.share({
					...shareData,
					provider: "weixin",
					success: (res) => {
						console.log("success:", res);
					},
					fail: (err) => {
						console.log("fail:", err);
						this.$api.msg('分享失败，请重试');
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},

			// 选中规格
			specSelected(idx, specIdx) {
				this.goods.skus[idx].curIdx = specIdx;

				this.spec = this.goods.skus.map(x => x.arrs[x.curIdx]).filter(x => x).join(' & ');
				this.sku = this.skuDatas.map(x => {
					return {
						spec: [x.sku1_spec, x.sku2_spec, x.sku3_spec, x.sku4_spec].filter(s => s).join(' & '),
						sku: x
					}
				}).find(x => x.spec == this.spec).sku;
			},
			// 加入购物车|立即购买的数量
			numberChange(res) {
				this.goods_num = res.number;
			},
			// 打开优惠券
			couponOpen() {
				uni.showLoading({
					title: '加载中'
				});

				this.$func.usemall.call('marketing/coupon/receiveGoods', {
					goods_id: this.id
				}).then(res => {
					uni.hideLoading();

					if (res.code == 200) {
						this.couponDatas = res.datas;
						return;
					}

					this.$api.msg(res.msg);
				})
			},
			// 领券
			couponReceive(rule_id) {
				uni.showModal({
					title: '提示',
					content: '领取优惠券',
					success: (res) => {
						if (res.confirm) {
							this.$func.usemall.call('marketing/coupon/receive', {
								rule_id
							}).then(res => {
								if (res.code === 200) {
									this.$api.msg('领取成功');
									this.couponOpen();
									return;
								}

								this.$api.msg(res.msg);
							});
						}
					}
				});
			},
			// 评论
			toevaluate() {
				uni.navigateTo({
					url: `/pages/goods/goods-evaluate?id=${this.id}`
				});
			},
			// 首页
			tohome() {
				this.$api.tohome();
			},
			// 客服
			tochat() {
				uni.navigateTo({
					url: `/sp-im/pages/chat`
				})
			},
			// 收藏
			tofavorite() {
				if (!this.loginCheck()) return;

				this.favorite = !this.favorite;
				let _data = {
					goods_id: this.id,
					state: !this.favorite ? '已取消' : '已收藏'
				};
				this.$func.usemall.call('member/collect', _data).then(res => {
					if (res.datas) {
						!this.favorite ? this.$api.msg('取消成功') : this.$api.msg('收藏成功');
						return;
					}

					this.$api.msg(res.msg);
				});
			},
			// 加入购物车
			tocart(type) {
				if (!this.loginCheck()) return;
				this.operType = type;

				// 如果存在多规格SKU，判断 specShow 是否已打开
				if (this.isSkus) {
					if (!this.specShow) {
						this.specShow = true;
						return;
					}

					if (!this.sku || !this.sku._id) {
						this.$api.msg('请选择加入购物车的规格');
						return;
					}
				}

				this.$func.usemall
					.call('goods/addcart', {
						goods_id: this.id,
						goods_num: this.goods_num,
						goods_sku: this.sku._id
					})
					.then(res => {
						if (res.code === 200) {
							this.$api.msg(res.datas.msg);
							return;
						}

						this.$api.msg(res.msg);
					});
			},
			// 立即购买
			tobuy(type) {
				console.log(this.isLogin)
				if (!this.isLogin){
					uni.showModal({
						title:"提示",
						content:"请先去登陆",
						confirmText:"去登陆",
						cancelText:"取消",
						success: (res) => {
							if(res.confirm){
								uni.navigateTo({
									url:"../login/login"
								})
							}
						}
					})
					return;
				}

				//order_save
				// {"addressId":109,"bankId":47,"bankNO":"307584007998","callbackUrl":"www.baidu.com",
				// "commodityId":"G00006","makerId":157,"payType":0,"quantity":1,"tradeType":1,"type":"1"}
				uni.navigateTo({
					url: `/pages/order/create?goods_id=${this.goods.id}&goods_num=${this.goods_num}`
				});
			},
			toMember() {
				if (this.member && this.member.vip) {
					uni.navigateTo({
						url: '/pages/user/member/member'
					})
					return;
				}

				uni.navigateTo({
					url: '/pages/user/member/member-not'
				})
			}
		},
		mounted() {
			// #ifndef MP-ALIPAY
			this.$nextTick(() => {
				this.statusHeight = this.$refs.navbar.navbarStatusHeight + 'px';
				// #ifdef APP
				this.navbarHeight = -this.$refs.navbar.navbarHeight + 'px';
				// #endif
			})
			// #endif
		}
	};
</script>

<style lang="scss">
	page {
		padding-bottom: 120rpx;
	}

	contact-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
	}

	.fixed-top {
		bottom: 230rpx;
	}

	/* 01. 轮播区 */
	.swiper-area {
		height: 760rpx;
		top: 0;
		z-index: 0;
	}

	/* 02. 商品数据区 */
	.goods-area {
		/*margin-top: 720rpx !important;*/
		padding-top: 20rpx;
		top: 760rpx;
		width: 100%;
		z-index: 1;

		.title {
			line-height: 42rpx;
		}
	}

	.dot {
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background: #bbb;
		display: inline-block;
		position: relative;
		top: -6rpx;
	}

	.share-area {
		.vertical-line {
			right: 50%;
			height: 40%;
		}
	}

	/* 03. 规格区 */
	.sku-area .active {
		background: $base-color;
		color: #fff !important;

	}

	/* 04. 服务区 */
	.icon-detail {
		right: 30rpx;
		top: 24rpx;
	}

	/* 05. 评价 */
	.evaluate-area {
		.headimg {
			flex-shrink: 0;
			width: 70rpx;
			height: 70rpx;
		}

		.content-area {
			.image-area {
				height: 200rpx;
				width: 30%;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				border: 1px solid #f5f5f5;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	/* 06. 详情区 */
	.detail-area {

		/* 产品详情 */
		.pro-detail {
			width: 100%;
			overflow: hidden;
			-webkit-touch-callout: none;

			img {
				width: 100%;
				max-width: 100%;
				overflow: hidden;
			}
		}

	}

	/* 07. 操作区 */
	.oper-area {
		left: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 0 20rpx 0 #f0f0f0;
		height: 100rpx;
		height: calc(env(safe-area-inset-bottom) + 100upx);
		z-index: 95;

		.btn-area {
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;

			.iconfont {
				font-size: 40rpx;
				line-height: 48rpx;
			}
		}
	}

	/* 优惠券区 */
	.coupon-area {
		max-height: 60vh;
		min-height: 30vh;

		.coupon-item {
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.content {
				&:after {
					position: absolute;
					left: 0;
					bottom: 0;
					content: '';
					width: 100%;
					height: 0;
					border-bottom: 1px dashed #f3f3f3;
					transform: scaleY(50%);
				}
			}

			.circle {
				position: absolute;
				bottom: -10rpx;
				z-index: 10;
				width: 20rpx;
				height: 20rpx;
				background: #f5f5f5;
				border-radius: 50%;

				&.r {
					right: -6rpx;
				}

				&.l {
					left: -6rpx;
				}
			}
		}
	}
</style>
